import { computed, defineComponent, ref } from 'vue';
import Actions from './Actions.vue';
import ActionsAlignment from './ActionsAlignment.vue';
import Basic from './Basic.vue';
import Expandable from './Expandable.vue';
import HorizontalBasic from './HorizontalBasic.vue';
import HorizontalMoreInvolved from './HorizontalMoreInvolved.vue';
import Media from './Media.vue';
import Parallax from './Parallax.vue';
import Table from './Table.vue';
import Tabs from './Tabs.vue';
import VariousContent from './VariousContent.vue';
import Video from './Video.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Actions</h5>
            <Actions />
          </div>
          <div class='block-'>
            <h5 class='title'>ActionsAlignment</h5>
            <ActionsAlignment />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Expandable</h5>
            <Expandable />
          </div>
          <div class='block-'>
            <h5 class='title'>HorizontalBasic</h5>
            <HorizontalBasic />
          </div>
          <div class='block-'>
            <h5 class='title'>HorizontalMoreInvolved</h5>
            <HorizontalMoreInvolved />
          </div>
          <div class='block-'>
            <h5 class='title'>Media</h5>
            <Media />
          </div>
          <div class='block-'>
            <h5 class='title'>Parallax</h5>
            <Parallax />
          </div>
          <div class='block-'>
            <h5 class='title'>Table</h5>
            <Table />
          </div>
          <div class='block-'>
            <h5 class='title'>Tabs</h5>
            <Tabs />
          </div>
          <div class='block-'>
            <h5 class='title'>VariousContent</h5>
            <VariousContent />
          </div>
          <div class='block-'>
            <h5 class='title'>Video</h5>
            <Video />
          </div>
        </div>
      );
    };
  },
});
